<link rel="stylesheet" href="ccay/example/demo.css"  type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/igrid/filter.js" charset="utf-8"></script>
<style type="text/css">
h5{font-size: 13px; font-weight: normal; line-height: 23px; float: right;}
h6{font-size: 13px; color: red; float: left; line-height: 13px;}
.showClew{font-size: 12px; color: olive;}
.showClew span{color: peru;}
.spanShow{color: peru;}
</style>
<div id="filterFunctionDemo">
	<!-- API区 -->
	<div title='API' tabid='tab1'><br />
	
		<h2 style="cursor: pointer;"><a onclick="Ccay.Common.toggle(this,'#api1')">1.列筛选参数配置filter</a></h2>
		<div style="display:none" id="api1">
			<ul><li><h3>开启筛选功能，需要在全局的grid options参数指定op.allowFilter 为 true,列设置只要设置了 filter参数，则会启用列上的筛选菜单</h3></li></ul>
			<form class="init ccay-form longtitle">
			<div class="ccay-form-body ccay-form-custom">
				<ul>
					<li class="ccay-form-row">
						<samp><h3>column.filter:{...}</h3></samp>
						<span class="ccay-form-input"><h3>描述 </h3></span>
					</li>
					<li class="ccay-form-row">
						<samp>multi</samp>
						<span class="ccay-form-input">[boolean] 枚举类型时候，配置改参数为true，可在配置项添加checkbox多选</span>
					</li>
					<li class="ccay-form-row">
						<samp>defines</samp>
						<span class="ccay-form-input">[object array] 配置该列的自定义筛选项,可配置多个，以数组形式体现， 例如 defines:[{operation:"lessThen", value : 60}]</span>
					</li>
					<li class="ccay-form-row">
						<samp>values</samp>
						<span class="ccay-form-input">[array], 配置自定义的枚举筛选项，数组形式体现，例如 values :["湖南","湖北"，"江西"]</span>
					</li>
					<li class="ccay-form-row">
						<samp>type</samp>
						<span class="ccay-form-input">[string], 设置当前列的筛选项类型，如果不设置，则默认取column 对象的type属性，如过都没配置，则按照string筛选处理</span>
					</li>
					<li class="ccay-form-row">
						<samp>ajax</samp>
						<span class="ccay-form-input">[jquery ajax op], 动态数据枚举项，设置ajax参数，去查询后台服务，返回数组或list对象， 例如 ajax:{url:"XXXXXX"}</span>
					</li>
					<li class="ccay-form-row">
						<samp>valueField</samp>
						<span class="ccay-form-input">[string], 动态数据枚举项，设置实际比较字段名称，结合上面的ajax使用</span>
					</li>
					<li class="ccay-form-row">
						<samp>displayField</samp>
						<span class="ccay-form-input">[string], 动态数据枚举项，设置筛选项显示字段名称，结合上面的ajax使用</span>
					</li>
					<li class="ccay-form-row">
						<samp>defaultFilters</samp>
						<span class="ccay-form-input">[boolean], 是否开启正对列类型的默认筛选项目，默认为true，如果不需要默认筛选，则设置改参数为false</span>
					</li>
					<li class="ccay-form-row">
						<samp>custom</samp>
						<span class="ccay-form-input">[boolean], 高级筛选条件开关，默认开启，禁用则设置为false，禁用后，不会在筛选菜单生成高级筛选项</span>
					</li>
					<li class="ccay-form-row ccay-form-whole">
						<samp>input</samp>
						<span class="ccay-form-input">[boolean] / [Array] / [object], 
						<p>筛选开启下默认开启，是否禁用输入筛选或者指定输入筛选的操作项，最多3项,如：
						<p>1、[boolean] —— filter:{input:false}，开启输入筛选开关，默认开启，false时关闭
						<p>2、[Array] —— filter:{input:[{operation:"equals"},{operation:"prefix",checked:true},{operation:"exclude"},{operation:"includes"}]},操作项，非必须指定，其中checked:true为默认选中的操作项
						<p>3、[object] —— filter:{input:{valueField:"userId"}},指定输入框的valueField，适用于人员联想框，非必须指定，默认为“userId”
						</span>
					</li>
					<li class="ccay-form-row">
						<samp>fnInput</samp>
						<span class="ccay-form-input">[function], 输入筛选前的干预方法，参数（field,grid）</span>
					</li>
				</ul>
			</div>
			</form>
		</div>
		
		<h2 style="cursor: pointer;"><a onclick="Ccay.Common.toggle(this,'#api2')">2.具体筛选项配置</a></h2>
		<div style="display:none" id="api2">
			<form class="init ccay-form longtitle">
			<div class="ccay-form-body ccay-form-custom">
				<ul>
					<li class="ccay-form-row">
						<samp><h3>筛选项参数</h3></samp>
						<span class="ccay-form-input"> 描述</span>
					</li>
					<li class="ccay-form-row">
						<samp>operation</samp>
						<span class="ccay-form-input">[string] ,比较判定符号类型，具体配置，查看下表，不配置则按照equals 处理</span>
					</li>
					<li class="ccay-form-row">
						<samp>value</samp>
						<span class="ccay-form-input">[string number boolean data], 配置参考值</span>
					</li>
					<li class="ccay-form-row">
						<samp>relation</samp>
						<span class="ccay-form-input">[number], 单列配置项关系符号配置，默认为逻辑与，该处按默认处理即可，不需要主动配置 </span>
					</li>
					<li class="ccay-form-row">
						<samp>text</samp>
						<span class="ccay-form-input">[string], 配置项目在筛选菜单上的显示文本（可填写国际化key），可不填</span>
					</li>
					<li class="ccay-form-row">
						<samp>unique</samp>
						<span class="ccay-form-input">[boolean],多选模式下，设置改参数为true，则改筛选项前不会生成checkbox，只作为单项过滤</span>
					</li>
	
				</ul>
			</div>
			</form>
		</div>
		
		<h2 style="cursor: pointer;"><a onclick="Ccay.Common.toggle(this,'#api3')">3.IGrid内置筛选项比较判定符operation属性配置表</a></h2>
		<div style="display:none" id="api3">
			<form class="init ccay-form">
			<div class="ccay-form-body ccay-form-custom">
				<ul>
					<li class="ccay-form-row">
						<samp><h3>operation</h3></samp>
						<span class="ccay-form-input">描述</span>
					</li>
					<li class="ccay-form-row">
						<samp >equals</samp>	
						<span class="ccay-form-input">等于， 适应于 string number integer enum date datetime 等类型</span>	
					</li>
					<li class="ccay-form-row">
						<samp >unEqual</samp>	
						<span class="ccay-form-input">不等于， 适应于 string number integer enum date datetime 等类型</span>	
					</li>
					<li class="ccay-form-row">
						<samp >greatThan</samp>	
						<span class="ccay-form-input">大于， 适应与数字 与 日期 类型</span>	
					</li>
					<li class="ccay-form-row">
						<samp >lessThan</samp>	
						<span class="ccay-form-input">小于，  适应与数字 与 日期 类型</span>	
					</li>
					<li class="ccay-form-row">
						<samp >equalsGreatThan</samp>	
						<span class="ccay-form-input">大于等于，  适应与数字 与 日期 类型</span>	
					</li>
					<li class="ccay-form-row">
						<samp >equalsLessThan</samp>	
						<span class="ccay-form-input">小于等于， 适应与数字 与 日期 类型</span>	
					</li>
					<li class="ccay-form-row">
						<samp >includes</samp>	
						<span class="ccay-form-input">包含， 适应与string</span>	
					</li>
					<li class="ccay-form-row">
						<samp >exclude</samp>	
						<span class="ccay-form-input">不包含，适应与string</span>	
					</li>
					<li class="ccay-form-row">
						<samp >prefix</samp>	
						<span class="ccay-form-input">以...开头， 适应与string</span>	
					</li>
					<li class="ccay-form-row">
						<samp >suffix</samp>	
						<span class="ccay-form-input">以...结尾，   适应与string</span>	
					</li>
	
					<li class="ccay-form-row">
						<samp >empty</samp>	
						<span class="ccay-form-input">为空 , 适应与所有数据类型</span>	
					</li>
					<li class="ccay-form-row">
						<samp >unEmpty</samp>	
						<span class="ccay-form-input">不为空，适应与所有数据类型</span>	
					</li>
				</ul>
			</div>
			</form>
		</div>
		<h2 style="cursor: pointer;"><a onclick="Ccay.Common.toggle(this,'#api4')">4.manager管理器</a></h2>
		<div style="display:none" id="api4">
			使用方法：$(selector).manager().getFilters(filed)
			<form class="init ccay-form longtitle">
			<div class="ccay-form-body ccay-form-custom">
				<ul>
					<li class="ccay-form-row">
						<samp><h3>方法</h3></samp>
						<span class="ccay-form-input">描述</span>
					</li>
					<li class="ccay-form-row">
						<samp>getFilters</samp>
						<span class="ccay-form-input">[function] ,获得当前的筛选条件
						<p>参数（field）
						<p>1、当参数为空时，得到当前所有列的筛选条件，返回的是object
						<p>如：{name:[{operation:"includes",value:"test"}],age:[{operation:"greatThan",value:"18"}]}，记录了name和age列的筛选条件
						<p>2、当指定参数field（列名）时，得到该列的筛选条件，返回的是array
						<p>如：[{operation:"includes",value:"test"}]
						</span>
					</li>
				</ul>
			</div>
			</form>
		</div>
	</div>

	<div title="示例" tabid='tab2'>
	    <div class="ccay-grid">
			<div class="ccay-grid-toolbar" id="toolbar1">
				<span id="btnAdd1" class="ccay-button" >
					<a class="ccay-icon add"></a>
					<label>insert</label>
				</span>
				<span id="btnDel1" class="ccay-button" >
					<a class="ccay-icon pre-del"></a>
					<label>delete</label>
				</span>
				<span id="btnUndoDel1" class="ccay-button" >
					<a class="ccay-icon undel"></a>
					<label>undo delete</label>
				</span>
				<span id="btnSave1" class="ccay-button" >
					<a class="ccay-icon save"></a>
					<label>save</label>
				</span>
			</div>
			<div id="iGrid1"></div>
		</div>

		<h3>html Code</h3>
		<span></span>
		<div class="codeArea">
			<pre id='html1'>
&lt;div class="ccay-grid">			
  &lt;div class="ccay-grid-toolbar" id="toolbar1">
  		&lt;span id="btnAdd1" class="ccay-button" >
			&lt;a class="ccay-icon add">&lt;/a>
			&lt;label>insert&lt;/label>
		&lt;/span>
		&lt;span id="btnDel1" class="ccay-button" >
			&lt;a class="ccay-icon pre-del">&lt;/a>
			&lt;label>delete&lt;/label>
		&lt;/span>
		&lt;span id="btnUndoDel1" class="ccay-button" >
			&lt;a class="ccay-icon undel">&lt;/a>
			&lt;label>undo delete&lt;/label>
		&lt;/span>
		&lt;span id="btnSave1" class="ccay-button" >
			&lt;a class="ccay-icon save">&lt;/a>
			&lt;label>save&lt;/label>
		&lt;/span>
  &lt;/div>
&lt;div id="iGridDemo">&lt;/div>
&lt;/div>
	  		</pre>
		</div>
		<h3>js Code</h3>
		<span></span>
		<div class="codeArea">
			<pre id='js1'>
var gridOption = {
	height: 280,
	allowFilter :true,
	editMode: true,
	showStatus : true,
	storageOp:{
		cache: true, // 是否缓存数据
		cacheKey: ["id"] // 缓存key
	},
    columns: [
  		 {field: 'id', columnType:'select', multi:true},
		 {field:"name",name:"string name",width:100,filter:true,rule : {required : true,specialch:true,maxlength : 20}},
		 {field: 'sex',name: "bool Sex",width:100,type:"bool",filter:{defines:[{value : 1, text:"男"},{value : 0,text :"女"}]}},
		 {field:"age",name:"integer age",type:"integer",width:100, filter :{defines :[{operation:"lessThan", value : 60},{operation:"equalsGreatThan", value : 60} ]}},
		 {field: 'province', width:70, name: "enum province", type: 'enum',filter:{enumable : true,multi:true}, editorOp: {id: "comboProvince"}, format: {service:"LOOKUP2:province",valueField:"itemCode",displayField:"itemName"},width:100},
		 {field:"birthday",name:"User Birthday",type:"date",width:150, filter :true},
		 {field:"lastUpdateDate",name:"lastUpdateDate",type:"datetime",width:150, filter :true}
    ],
	ajax:{
  	 	url:'services/ccay/demo/student/list/page/filter/${pageSize}/${curPage}/${filter}'
	},
    operation: {
    	del: {
    		btn: '#btnDel1',
    		undoBtn: '#btnUndoDel1'
    	},
    	insert: {
    		btn: '#btnAdd1',
    		copy: true,
    		clear: ['id', 'name', 'lastUpdateDate'],
    		defaultRow:{sex:1, blog:'http://', tuition:'0'}
    	},
    	save: {
    		btn: '#btnSave1',
    		ajax: {
    			url: "services/ccay/demo/student/batch"
    		}
    	}
    }
};

$S("#iGridDemo").igrid(gridOption);

      		</pre>
		</div>
		<div class="try">
			<a class="try"
				onclick="Ccay.example.openTry('#filterFunctionDemo',$('#js1').html(),$('#html1').html())">亲自试一试</a>
		</div>
	</div>
	
		<div title="根根筛选生成搜索条件" tabid='tab3'>
		<div id="searchForm"></div>
	    <div class="ccay-grid">
			<div class="ccay-grid-toolbar" id="toolbar2">
				<span id="btnAdd2" class="ccay-button" >
					<a class="ccay-icon add"></a>
					<label>insert</label>
				</span>
				<span id="btnDel2" class="ccay-button" >
					<a class="ccay-icon pre-del"></a>
					<label>delete</label>
				</span>
				<span id="btnUndoDel2" class="ccay-button" >
					<a class="ccay-icon undel"></a>
					<label>undo delete</label>
				</span>
				<span id="btnSave2" class="ccay-button" >
					<a class="ccay-icon save"></a>
					<label>save</label>
				</span>
			</div>
			<div id="iGrid2"></div>
		</div>

		<h3>html Code</h3>
		<span></span>
		<div class="codeArea">
			<pre id='html3'>
&lt;div id="searchForm2">&lt;/div>
&lt;div class="ccay-grid">
&lt;div class="ccay-grid-toolbar" id="toolbar2">
	&lt;span id="btnAdd2" class="ccay-button" >
			&lt;a class="ccay-icon add">&lt;/a>
			&lt;label>insert&lt;/label>
		&lt;/span>
		&lt;span id="btnDel2" class="ccay-button" >
			&lt;a class="ccay-icon pre-del">&lt;/a>
			&lt;label>delete&lt;/label>
		&lt;/span>
		&lt;span id="btnUndoDel2" class="ccay-button" >
			&lt;a class="ccay-icon undel">&lt;/a>
			&lt;label>undo delete&lt;/label>
		&lt;/span>
		&lt;span id="btnSave2" class="ccay-button" >
			&lt;a class="ccay-icon save">&lt;/a>
			&lt;label>save&lt;/label>
		&lt;/span>
&lt;/div>
&lt;div id="iGrid3">&lt;/div>
&lt;/div>
	  		</pre>
		</div>
		<h3>js Code</h3>
		<span></span>
		<div class="codeArea">
			<pre id='js3'>

var gridOption3 = {
	height: 280,
	wrap: true,
	allowFilter :true,
	showSwitch:true,
	editMode: true,
	showStatus : true,
	switchMode:"search",
	genSearchByFilter:true,
    columns: [
	    {field: 'id', columnType:'select', multi:true},
		{field:"name",header:"string name",width:100,filter:true,rule : {required : true,specialch:true,maxlength : 20}},
		{field: 'mail', valueField: "id", width:100, header: "suggest",type:"suggest", filter :true , renderer: 'enum', editorOp: {type: "suggest", conf: suggestOps}},
		{field: 'sex',header: "bool Sex",width:100,type:"bool",filter:{defines:[{value : 1, text:"男"},{value : 0,text :"女"}]}},
		{field:"age",header:"integer age",type:"integer",width:100, filter :{defines :[{operation:"lessThan", value : 60},{operation:"equalsGreatThan", value : 60} ]}},
		{field: 'province', width:70, header: "enum province", type: 'enum',filter:true, editorOp: {id: "comboProvince"}, format: {service:"LOOKUP2:province",valueField:"itemCode",displayField:"itemName"},width:100},
		{field:"birthday",header:"User Birthday",type:"date",width:150, filter :true},
		{field:"lastUpdateDate",header:"lastUpdateDate",type:"datetime",width:150,filter :{range:true}}
    ],
	ajax:{
  	 	url:'services/ccay/demo/student/list/page/filter/${pageSize}/${curPage}/${filter}'
	},
    operation: {
    	search:{
    			panel:'#searchForm2'
    	},
    	del: {
    		btn: '#btnDel2',
    		undoBtn: '#btnUndoDel2'
    	},
    	insert: {
    		btn: '#btnAdd2',
    		copy: true,
    		clear: ['id', 'name', 'lastUpdateDate'],
    		defaultRow:{sex:1, blog:'http://', tuition:'0'}
    	},
    	save: {
    		btn: '#btnSave2',
    		ajax: {
    			url: "services/ccay/demo/student/batch"
    		}
    	}
    }
};
var suggestOps = {
		url: "services/ccay/demo/student/list/page/${suggestNum}/1",
		valueField: "id",
		displayField: "name",
		fieldMapper: {
			name: "sName",
			sex: "sSex",
			address: "sAddress"
		}
	};
var popupOps = {
		igrid: true,
		servicePath: "services/ccay/demo/student/list",
		uniqueKey: "id",
		displayField: "name",
		columns: [
			{header: "sName", field: 'name'},
			{header: "sSex", field: 'sex'},
			{header: "sAddress", field: 'address'}
		]
	};	
$S("#iGrid3").igrid(gridOption3);
      		</pre>
		</div>
		<div class="try">
			<a class="try"
				onclick="Ccay.example.openTry('#filterFunctionDemo',$('#js3').html(),$('#html3').html())">亲自试一试</a>
		</div>
	</div>
	
	<!-- Try区 -->
	<div title="试一试" tabid="trytab" >
	    <fieldset class='ccay-demo'>
	    <legend ><h2>代码区</h2></legend>
		   
		   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 

				<div>
				    <table  style="width:100%;">
				      <tr>
				        <td style="width:100%;">
						<h3>js Code:</h3>	
						  <!-- 高度按需来调整。默认最小应为100px -->					
	                      <textarea id="jsTxt" style="height:250px;width:99%;"></textarea>
	                    </td>   
	                  </tr>
	                  <tr>
	                    <td style="width:100%;">
						<h3>html Code:</h3>
						  <!-- 高度按需来调整。默认最小应为100px -->
	                      <textarea id="htmlTxt" style="height:100px;width:99%;"></textarea>
	                    </td>
	                  </tr> 
                    </table>
				</div>
           </fieldset>
        <fieldset class='ccay-demo'>
          <legend ><h2>结果区</h2></legend>
			<div>
				<div style="overflow:auto;" id="demoMainPanel"></div>
			</div>
        </fieldset>
     </div>
	
	<!-- FAQ区 -->
	<div title="FAQ">
		<form class="init ccay-form">
			<div class="ccay-form-body">
				<ul>
					<li class="ccay-form-row"><samp>
							<h3>问题</h3>
						</samp> <span class="ccay-form-input">
							<h3>解决方案</h3>
					</span></li>
				</ul>

				<ul>
					<li class="ccay-form-row ccay-form-whole"><samp>除了页面文件，还有哪些地方需要更改？</samp>
						<span class="ccay-form-input">
						    1. 服务定义中增加filter部分<br>						    
							2.对应的*DAO.xml中增加addFilter定义，本示例参考文件\ccay-demo-ui\src\main\resources\org\ccay\demo\student\dao\IStudentDao.xml
					    </span>
				    </li>
				</ul>
			</div>
		</form>
	</div>

</div>